<template>
	<view class="anchor_shop">
		<!-- 背景 -->
		<view class="bg_top"></view>
		<!-- 展示层-->
		<view class="page" v-if="userInfo&&itemTags">
			<!-- 主播信息 -->
			<view class="header">
				<view class="left">
					<view class="img">
						<image :src="userInfo.avatar" mode="aspectFill" load></image>
					</view>
					<view class="text">
						<view class="nickname">{{userInfo.nickname}}</view>
						<view class="fansCount">
							<span>{{(userInfo.fansCount/10000).toFixed(1)}}w</span>
							<span> 粉丝</span>
						</view>
						<view class="weight_height">
							<span>{{userInfo.height}} cm</span>
							<span> | </span>
							<span>{{userInfo.weight}} kg</span>
						</view>
					</view>
				</view>
				<view class="right btn">
					关注
				</view>
			</view>
			<!-- 直播 -->
			<view class="anchor" v-if="false">
				<view class="img">
					<image :src="userInfo.avatar" mode="aspectFill"></image>
				</view>
				<view class="text">
					<view class="title">开伦年中大清仓！</view>
					<view class="hot">
						<view class="icon cuIcon-hotfill"> 4.7万热度</view>
					</view>

				</view>
				<view class="btn">
					去看直播
				</view>
			</view>
			<!-- 商品列表 -->
			<view class="commodity">
				<view class="header">
					<!-- 列表控件 -->
					<view class="box">
						<view class="search">
							<view class="icon cuIcon-search"></view>
							<input v-model="search_value" type="text" placeholder="搜索直播商品" @focus="active_search" />
						</view>
						<view class="where" v-if="!isSearch">
							<view :class="['item',{active:sortBy==0}]" @click="setSortBy(0)">
								最新
							</view>
							<view :class="['item',{active:sortBy==1}]" @click="setSortBy(1)">
								热销
							</view>
							<view :class="['item','price',{active:(sortBy==2||sortBy==3)}]"
								@click="sortBy!=2?setSortBy(2):setSortBy(3)">
								<view>
									价格
								</view>
								<view class="icon">
									<view class="cuIcon-triangleupfill icon_top"
										:style="`${sortBy==3?'color:#FF5F8E;':'color:black;'}`"></view>
									<view class="cuIcon-triangledownfill icon_bottom"
										:style="`${sortBy==2?'color:#FF5F8E;':'color:black;'}`"></view>
								</view>
							</view>
							<view
								:class="['item', 'cate',{active2:isShow_down_box},{active:tagName!=''||isShow_down_box}]"
								@click="show_down_box_toggle">
								<view>
									分类
								</view>
								<view class="cuIcon-triangledownfill icon"></view>
							</view>
						</view>
						<view class="btn" v-else @click="exit_search">
							取消
						</view>
					</view>
					<!-- 分类的下拉盒子 -->
					<view class="down_box" v-if="isShow_down_box">
						<view :class="['item',{active:tagName==''}]" @click="setTagName('')">
							全部
						</view>
						<view :class="['item',{active:tagName==item.tagName}]" v-for="item in itemTags"
							:key="item.tagName" @click="setTagName(item.tagName)">
							{{item.tagName}}
						</view>
					</view>
				</view>
				<!-- 列表 -->
				<scroll-view class="list" scroll-y v-if="item_info_list2.length>0" @scroll="list_scroll"
					:key="search_value">
					<!-- explainId -->
					<view class="box">
						<WaterfallsFlowAnchorShop :wfList='item_info_list2' @itemTap="itemTap" />
					</view>
					<!-- loading -->
					<view class="cu-load loading" v-if="loading"></view>
				</scroll-view>
				<view class="null" v-else>
					还没有没有商品~~
				</view>
			</view>

		</view>
	</view>
</template>

<script setup>
	import {
		computed,
		nextTick,
		onMounted,
		ref,
		watch,
		getCurrentInstance
	} from 'vue';
	import {
		req_actor_userInfo,
		req_actor_itemTags,
		req_actor_item_info
	} from './anchor_shop_api.js'
	import {
		useVideData
	} from '../../store/videoDetail.js';
	// 页面
	const pages = getCurrentPages();
	const currentPage = pages[pages.length - 1];
	const options = currentPage.options; // 部分端可能不支持
	// 请求的参数
	// actorId	主播id	string	√
	// page	分页	number	<1>	
	// sortBy	排序	number	<0>	0综合、1 热销、2价格升序、3价格降序
	// tagName	分类名	string
	// uid	主播id	string	√
	const uid = options.uid
	const actorId = options.uid
	const page = ref(1)
	const sortBy = ref(0)
	const tagName = ref('')
	// 响应回来的页码
	const response_page = ref(2)
	// 主播信息
	const userInfo = ref(null)
	// 商品列表
	const item_info_list = ref([])
	const item_info_list2 = computed(() => {
		let arr = item_info_list.value.filter(v => {
			if (search_value.value == '') {
				return v
			}
			return v.title.includes(search_value.value)
		})
		return arr
	})
	// 商品分类
	const itemTags = ref(null)
	//  down_box开关
	const isShow_down_box = ref(false)
	// 搜索框的值
	const search_value = ref('')
	// 搜索状态
	const isSearch = ref(false)
	// 列表请求状态
	const loading = ref(false)
	const finished = ref(false)
	// 回放视频仓库
	const videoStore = useVideData()
	// 列表高度
	const listHeight = ref(0)

	onMounted(() => {
		getInitData()
	})

	// 商品列表筛选请求参数变化
	watch([sortBy, tagName], () => {
		page.value = 1
		finished.value = false
		req_list2()
	})

	// 获取根节点高度
	const getListHeight = () => {
		const query = uni.createSelectorQuery()
		query.in(getCurrentInstance())
		query.select('.commodity > .list').boundingClientRect(data => {
				console.log(data);
				listHeight.value = data.height
			})
			.exec()
	}

	// 列表滚动
	const list_scroll = (e) => {
		if (!listHeight.value) {
			getListHeight()
			return
		}
		if (item_info_list.value.length == 0) return;
		if (loading.value) return;
		if (finished.value) return;
		const height = listHeight.value
		const scrollHeight = e.detail.scrollHeight - height
		const scrollTop = e.detail.scrollTop

		if (scrollHeight - 300 <= scrollTop) {
			console.log('触发');
			page.value += 1
			if (page.value != response_page.value) {
				finished.value = true
			}
			req_list()
		}
	}


	// 请求商品列表
	const req_list = () => {
		console.log(loading.value);
		if (loading.value) return
		if (finished.value) return
		loading.value = true
		req_actor_item_info({
				actorId: actorId,
				page: page.value,
				sortBy: sortBy.value,
				tagName: tagName.value
			})
			.then(res => {
				if ('hint' in res) {
					loading.value = false
					return
				}
				console.log("商品列表", res.data.itemList);
				response_page.value = res.data.page
				Array.prototype.push.apply(item_info_list.value, res.data.itemList)
				console.log(item_info_list.value);
			})
			.finally(() => {
				loading.value = false
			})
	}
	// 请求商品筛选列表
	const req_list2 = () => {
		if (loading.value) return
		if (finished.value) return
		finished.value = true
		uni.showLoading({
			title: '加载中'
		})
		req_actor_item_info({
				actorId: actorId,
				page: page.value,
				sortBy: sortBy.value,
				tagName: tagName.value
			})
			.then(async res => {
				if ('hint' in res) {
					finished.value = true
					item_info_list.value = []
					return
				}
				console.log("商品列表", res.data.itemList);
				response_page.value = res.data.page
				item_info_list.value = []
				await nextTick()
				item_info_list.value = res.data.itemList
				console.log(item_info_list.value);
			})
			.finally(() => {
				finished.value = false
				uni.hideLoading()
			})
	}

	// 进入搜索
	const active_search = () => {
		isSearch.value = true
	}
	// 退出搜索
	const exit_search = () => {
		isSearch.value = false
	}
	// 设置sortBy
	const setSortBy = (value) => {
		sortBy.value = value
	}
	// 设置tagName
	const setTagName = (value) => {
		tagName.value = value
	}

	// isShow_down_box切换
	const show_down_box_toggle = () => {
		isShow_down_box.value = !isShow_down_box.value
	}
	// 商品被点击
	const itemTap = (item) => {
		if (item.explainId == 0) {
			toDetail(item.itemId)
			return
		}
		videoStore.item = item
		const itemId = item.itemId
		const actorId = item.actorId
		const explainId = item.explainId
		uni.navigateTo({
			url: `/pages/videoPlay/videoPlay?itemId=${itemId}&actorId=${actorId}&explainId=${explainId}`
		})
	}

	// 获取初始化数据
	const getInitData = async () => {
		uni.showLoading({
			title: "加载中"
		})
		const req_ = [
			req_actor_userInfo({
				uid
			})
			.then(res => {
				console.log("主播信息", res.data);
				userInfo.value = res.data
			}),
			req_actor_itemTags({
				uid
			})
			.then(res => {
				console.log("商品分类", res.data);
				itemTags.value = res.data
			}),
			req_actor_item_info({
				actorId: actorId,
				page: page.value,
				sortBy: sortBy.value,
				tagName: tagName.value
			})
			.then(res => {
				console.log("商品列表", res.data.itemList);
				response_page.value = res.data.page
				item_info_list.value = res.data.itemList
			})
		]
		const response = await Promise.all(req_)
		uni.hideLoading()
	}
	// 跳转商品详情
	const toDetail = (iid) => {
		uni.navigateTo({
			url: `/pages/detail/detail?itemId=${iid}`
		});
	}
</script>

<style lang="scss" scoped>
	image {
		vertical-align: middle;
	}

	.anchor_shop {
		width: 100vw;
		height: 100vh;
		overflow: hidden;

		>.bg_top {
			background-color: #FF4F7F;
			width: 260vw;
			height: 43vh;
			position: absolute;
			z-index: 0;
			border-radius: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}

	.page {
		width: 100%;
		height: 100%;
		position: relative;
		z-index: 1;
		padding: 20upx 20upx 0 20upx;
		display: flex;
		flex-direction: column;

		>.header {
			flex-shrink: 0;
			height: 15%;
			display: flex;
			justify-content: space-between;
			align-items: center;

			>.left {
				display: flex;
				color: white;
				font-size: 1.1rem;
				gap: 20upx;
				align-items: center;

				.img {
					image {
						width: 120upx;
						height: 120upx;
						border-radius: 50%;
						border: 1px solid white;
					}
				}

				.text {
					display: flex;
					flex-direction: column;
					gap: 10upx;

					.fansCount {
						font-size: 0.8rem;
					}

					.weight_height {
						font-size: 0.8rem;
					}
				}
			}

			>.right.btn {
				background-color: #fff;
				color: #FF5282;
				padding: 10upx 40upx;
				border-radius: 2rem;
				font-size: 0.8rem;
			}
		}

		>.anchor {
			flex-shrink: 0;
			height: 200upx;
			padding: 30upx;
			background-color: #fff;
			border-radius: 10upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 20upx;

			.img {
				flex-shrink: 0;

				image {
					width: 120upx;
					height: 120upx;
				}
			}

			.text {
				flex-grow: 1;
				position: relative;
				display: flex;
				flex-direction: column;
				gap: 20upx;

				.title {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: 1rem;
				}

				.hot {
					font-size: 0.6rem;

					.icon::before {
						color: #FF4F7F;
						font-size: 1rem;
					}
				}
			}

			.btn {
				flex-shrink: 0;
				border: 1px solid #FF5383;
				border-radius: 2rem;
				padding: 10upx 30upx;
				color: #FF5383;
				font-size: 0.8rem;
				display: flex;
				align-items: center;
				gap: 5upx;

				&::before {
					content: '';
					display: inline-block;
					width: 10upx;
					height: 10upx;
					border-radius: 50%;
					background-color: #FF5383;
				}
			}
		}

		>.commodity {
			flex-grow: 1;
			overflow: hidden;
			background-color: #fff;
			margin-top: 20upx;
			// padding-bottom: 0upx;
			display: flex;
			flex-direction: column;

			.header {
				flex-shrink: 0;
				height: 100upx;
				position: relative;
				display: flex;
				align-items: center;

				>.box {
					display: flex;
					align-items: center;
					gap: 40upx;
					padding: 20upx;
					width: 100%;

					.search {
						width: 100%;
						display: flex;
						align-items: center;
						border: 1px solid rgba(100, 100, 100, 0.2);
						padding: 2upx 5upx;
						border-radius: 2rem;

						input {
							font-size: 0.8rem;
							width: 100%;
						}

						.icon {
							font-size: 0.8rem;
							padding: 10upx;
						}
					}

					.where {
						display: flex;
						flex-grow: 1;
						flex-shrink: 0;
						justify-content: space-between;
						align-items: center;
						width: 55%;

						>.item {
							&.active {
								color: #FF4F7F;
							}
						}

						>.price {
							display: flex;

							>.icon {
								>view {
									height: 0.35rem;
								}
							}
						}

						>.cate {
							display: flex;
							align-items: center;

							.icon {

								transition: all 0.5s;
							}

							&.active2 {
								.icon {
									transform: rotate(180deg);
								}
							}
						}
					}

					.btn {
						flex-shrink: 0;
						padding: 0 20upx;
						margin-left: -40upx;
						color: deepskyblue;
					}
				}

				>.down_box {
					position: absolute;
					background-color: #fff;
					width: 100%;
					padding: 20upx;
					display: grid;
					grid-template-columns: repeat(5, 1fr);
					flex-wrap: wrap;
					gap: 20upx;
					font-size: 0.8rem;
					text-align: center;
					bottom: 0;
					transform: translateY(100%);
					z-index: 1;

					>.item {
						border: 1upx solid gray;
						height: 60upx;
						box-sizing: border-box;
						line-height: 60upx;

						&.active {
							border-color: #FF4F7F;
							color: #FF5282;
						}
					}
				}
			}

			>.list {
				height: 100%;
				overflow: hidden;
				padding: 0 20upx;

				.box {
					width: 100%;
				}

			}

			>.null {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				font-size: 1.2rem;
				width: 100%;
				text-align: center;
			}
		}
	}
</style>